﻿@{
    Layout = "~/Views/Shared/_Layout.Mobile.cshtml";
    ViewBag.Title = "AddReport.Mobile";
}
<link href="~/Scripts/mobilejs/dataTime/mobiscroll.min.css" rel="stylesheet" />
<script src="~/Scripts/mobilejs/main.js"></script>
<script src="~/Scripts/mobilejs/dataTime/mobiscroll.min.js"></script>

<div class="mainCont">
    <header class="bar bar-nav">
        <h1 class='title titlebar'>新试验</h1>
    </header>

    <div class="content ">
        <div class="list-block">
            <ul>
                <!-- Text inputs -->
                <li>
                    <div class="item-content">
                        <div class="item-media"><i class="icon icon-form-email"></i></div>
                        <div class="item-inner">
                            <div class="item-title label">姓名</div>
                            <div class="item-input">
                                <input type="text">
                            </div>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="item-content">
                        <div class="item-media"><i class="icon icon-form-email"></i></div>
                        <div class="item-inner">
                            <div class="item-title label">邮箱</div>
                            <div class="item-input">
                                <input type="email" placeholder="E-mail">
                            </div>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="item-content">
                        <div class="item-media"><i class="icon icon-form-password"></i></div>
                        <div class="item-inner">
                            <div class="item-title label">密码</div>
                            <div class="item-input">
                                <input type="password" placeholder="Password" class="">
                            </div>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="item-content">
                        <div class="item-media"><i class="icon icon-form-gender"></i></div>
                        <div class="item-inner">
                            <div class="item-title label">性别</div>
                            <div class="item-input">
                                <select>
                                    <option>Male</option>
                                    <option>Female</option>
                                </select>
                            </div>
                        </div>
                    </div>
                </li>
                <!-- Date -->
                <li>
                    <div class="item-content">
                        <div class="item-media"><i class="icon icon-form-calendar"></i></div>
                        <div class="item-inner">
                            <div class="item-title label">生日生日生日生日生日生日生日</div>
                            <div class="item-input">
                                <input type="date">
                            </div>
                        </div>
                    </div>
                </li>
                <!-- Switch (Checkbox) -->
                <li>
                    <div class="item-content">
                        <div class="item-media"><i class="icon icon-form-toggle"></i></div>
                        <div class="item-inner">
                            <div class="item-title label">开关</div>
                            <div class="item-input">
                                @*<div class="checkbox"></div>*@
                                <label class="label-switch">
                                    <input type="checkbox">
                                    <div class="checkbox"></div>
                                </label>
                            </div>
                        </div>
                    </div>
                </li>
                <li class="align-top">
                    <div class="item-content">
                        <div class="item-media"><i class="icon icon-form-comment"></i></div>
                        <div class="item-inner">
                            <div class="item-title label">文本域</div>
                            <div class="item-input">
                                <textarea></textarea>
                            </div>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
        @*<div class="headClass"><span class="headline">报告1</span></div>
            <div class="content">
                <div>
                    <div class="leftContent">产品</div>
                    <div class="rightContent">产品A</div>
                </div>
                <div class="dashed"></div>
                <div>
                    <div class="leftContent">农作物</div>
                    <div class="rightContent">农作物A</div>
                </div>
                <div class="dashed"></div>

                <div>
                    <div class="leftContent">城市</div>
                    <div class="rightContent">City</div>
                </div>
                <div class="dashed"></div>
                <div>
                    <div class="leftContent">创建时间</div>
                    <div class="rightContent">CreatedDate</div>
                </div>
                <div class="dashed"></div>
                @*<div class="dashed" style="border-bottom:0px solid #ffffff;padding:15px"></div>
                <div>
                    <form method="post" action="../Trial/AddReportAjax">
                        <div style="  margin-left: 10px;margin-top: 20px;">实验报告</div>
                        <div id="showimage">


                        </div>
                        <button type="submit">选择图片</button>
                    </form>
                </div>
                <div class="dashed"></div>
                <div>
                    <textarea style="min-height:150px; background-color:#ffffff; opacity:0.7;color:#666666;font-size:14px" placeholder="请填写实验说明"></textarea>
                </div>
                <button type="button" class="btn btn-default" id="search" style="width:200px;margin:10px 50px;">提交</button>
            </div>*@
    </div>
</div>
<script>
    $().ready(function () {

        //localStorage.setItem("Report-1", "");
        //if (localStorage.getItem("Report-1") != "") {
        //    var content = "<img name='imagesource' style='margin-right:10px' src='" + localStorage.getItem('Report-1') + "'>";
        //    var hiddeninput = "<input type='hidden' name='imagesource'  value='" + localStorage.getItem('Report-1') + "'></input>";
        //    //$("#showimage").append(content);
        //    $("#showimage").append(hiddeninput);
        //    //$("#showimage").append(content);


        //    //$("#image").attr("src", localStorage.getItem("Report-1"));
        //}
    })
    function CreateElementDynamic(lablename, type) {
        if (type == "text") {
            return $('ul').append('<div class="item-content"><div class="item-media"><i class="icon icon-form-email"></i></div><div class="item-inner"><div class="item-title label">' + lablename + '</div><div class="item-input"><input type="text"></div> </div> </div>');
        } else if (type = "date") {
            return $('ul').append("<input type=\"text\" id='datetime-picker' data-toggle='date'/>")
            //return $('ul').append('<div class="item-content"><div class="item-media"><i class="icon icon-form-email"></i></div><div class="item-inner"><div class="item-title label">' + lablename + '</div><div class="item-input"><input type="text" id="datetime-picker"></div> </div> </div>');
        }
    }
    function Preview(file, targetid) {
        if (!/(.jpg|.png|.bmp|.jpeg)$/i.test(file.value)) {
            alert("File do not exist or not image type file. Please try again.");
            DeletePreview(file);
            return;
        }

        if (file.files != undefined && file.files.length === 1) {
            if (file.files[0] && (file.files[0].type == "image/png" || file.files[0].type == "image/jpg" || file.files[0].type == "image/bmp" || file.files[0].type == "image/jpeg")) {
                var reader = new FileReader();
                reader.onload = function (evt) {
                    document.getElementById(targetid).innerHTML = '<img class=\"img_preview\" src="' + evt.target.result + '" />'+
                        '<img src=\"../Images/del.png\" style=\"height:15px;margin-top:-30px;cursor:pointer;\" onclick=\"DeletePreview(" + $(this).data("value") + ")\" />';
                }
                reader.readAsDataURL(file.files[0]);
            }
        }
        else {  //IE
            //if ((/(jpg|png|bmp|jpeg)$/i.test(file.value))) {
            file.select();
            var realpath = document.selection.createRange().text;

            document.getElementById(targetid).innerHTML = '<img class=\"img_preview\" src=\"\" />';
            document.getElementById(targetid).firstChild.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale',src=\"" + realpath + "\")";
            document.getElementById(targetid).firstChild.src = '';
        }
        //else {
    }

    function DeletePreview(file) {
        var fileid = file.id;
        var newfile = $(file).clone().val("");
        $(file).after(newfile);
        $(file).remove();
    }
</script>
